<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <!--<link rel="stylesheet" href="../mycss/main.css"/>-->
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css" media="screen"/>

    <link rel="stylesheet" href="../bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" media="screen"/>
    <script src="../jquery/jquery-3.3.1.min.js"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <script src="../bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script src="../bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <title>账户信息</title>
</head>
<body>
<div th:include="header :: header"></div>
<div class="panel panel-default container">
    <div class="panel-heading row">
        账户信息
    </div>
    <div class="panel-body row">
        <div class="row" style="height: 50px">
            <div class="col-sm-1 col-xs-1">
                <label class="control-label">注册时间:</label>
            </div>
            <div class="col-sm-2 col-xs-2">
                <input type="text" th:value="${registerTime}" disabled="disabled"/>
            </div>
        </div>
        <div class="row" style="height: 50px">
            <div class="col-sm-1 col-xs-1">
                <label class="control-label">手机号:</label>
            </div>
            <div class="col-sm-2 col-xs-2">
                <input type="text" th:value="${telephone}" disabled="disabled"/>
            </div>
            <div class="col-sm-3 col-xs-3">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#tele">更改绑定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="tele" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">绑定手机</h4>
            </div>
            <form action="/bindPhone" onsubmit="check(this)" method="post">
                <div class="modal-body">
                    <div class="row">
                        <label for="phoneNumber" class="control-label col-md-2">手机号:</label>
                        <input type="text" id="phoneNumber" class="col-md-4" name="telephone" />
                        <button type="button" onclick="getVerify()" class="btn btn-primary col-md-2">获取验证码</button>
                    </div>
                    <div class="row">
                        <label for="verifyNumber" class="control-label col-md-2">验证码:</label>
                        <input type="text" id="verifyNumber" class="col-md-4" name="verifyNumber"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">更改绑定</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    var randomNumber;
    var phone ;
    $(document).ready(function() {
        //鑾峰彇瀹炴椂鐢佃瘽鍙风爜
        $("#phoneNumber").bind('input porpertychange',function () {
            phone = $("#phoneNumber").val();
        });
    });

    function getVerify() {
        var num = 8999;
        var top = 9999;
        var bottom = 1000;
        num = parseInt(Math.random() * (top - bottom + 1) + bottom);
        randomNumber = num;
        $.post("http://111.231.223.47:8035/message", {verifyCode: num, phoneNumber: phone},function(data){
            alert(data);
        });
    }

    function check() {
        var verifycode = $("#verifyNumber").val();
        var phone = $("#phoneNumber").val();
        if( verifycode == ""){
            alert("验证码为空�");
            return false;
        }
        if(phone == ""){
            alert("手机号为空");
            return false;
        }
        if (verifycode == randomNumber) {

            return true;
        } else {
            alert("位置错误�");
            return false;
        }
    }
</script>

</body>
</html>